<!-- 新增表单 -->
<template>
    <div id='add_container'>
        <div id="title">
            <div id="return_icon" @click="returnHandle">
                <img src="../assets/return.png" alt="" srcset="">
            </div>
            <div id="title_text">新增商户</div>
            <div id="commit_btn" @click="commitHandle">提交</div>
        </div>
        <div style="height: 54px;"></div>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="店铺名:">
                <el-input v-model="form.name" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="省:">
                <el-input v-model="address.province" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="市:">
                <el-input v-model="address.city" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="评分:">
                <el-input v-model="form.score" placeholder="请输入内容" @input="value => form.score = parseFloat(value)"/>
            </el-form-item>
            <el-form-item label="描述:">
                <el-input v-model="form.desc" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="活动价:">
                <el-input v-model="form.newPrice" placeholder="请输入内容" @input="value => form.newPrice = parseFloat(value)"/>
            </el-form-item>
            <el-form-item label="原价:">
                <el-input v-model="form.oldPrice" placeholder="请输入内容" @input="value => form.oldPrice = parseFloat(value)"/>
            </el-form-item>
            <el-form-item label="月售:">
                <el-input v-model="form.saleMonth" placeholder="请输入内容" @input="value => form.saleMonth = parseFloat(value)"/>
            </el-form-item>
            <el-form-item label="具体位置:">
                <el-input v-model="form.detailAddress" placeholder="请输入内容" type="textarea" />
            </el-form-item>
        </el-form>
        <!-- 地图组件 -->
        <Map></Map>
    </div>
</template>

<script setup>
import Map from "./Map.vue"
import { provide, ref, watch } from "vue";
import { useInfoStore } from '../stores/info'
import axios from "axios";

const info = useInfoStore();

// 表单数据
let form = ref({
    id:"",
    name: "",
    score: "",
    distance: "",
    desc: "",
    newPrice: "",
    oldPrice: "",
    saleMonth: "",
    location: "",
    detailAddress: ""
});

// 根据用户输入的省市，获取坐标定位地图中心点
let address = ref({
    province: "",
    city: ""
})

// const handleNewPriceInput = (value) => {
//     form.value.newPrice = value === '' ? null : parseFloat(value);
// };

// 根据省市查询地理坐标
function selectMapCenterLnglat() {
    console.log("都填写了");
    //将省市信息传递
    info.setAddress(address.value.province + address.value.city);
    info.changeFlag();
}

// 当address中的两个属性都被赋值后，根据省市查询地理坐标作为地图中心点。
watch(
    () => [address.value.province, address.value.city],
    ([newProvince, newCity]) => {
        if (newProvince && newCity) {
            selectMapCenterLnglat();
        }
    }
);

// 监听用户在地图上标记选取详细地址
watch(
    () => info.detailAddress,
    (newValue, oldValue) => {
        // 将详细展示
        form.value.detailAddress = newValue;
    }
)

// 退出表单填写
function returnHandle() {
    info.CloseAddForm();
}

// 提交控制器
async function commitHandle(){
    // 将pinia中的地理坐标赋值参数对象form
    form.value.location = info.Lnglat;
    console.log("提交的表单数据：",form.value);
    const res = await axios.post("http://localhost:9009/es",form.value);
    if(res.status == 200){
        info.CloseAddForm();
    }
    
}


</script>

<style scoped>
#title {
    width: 100%;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
    border-bottom: solid 1px #818181;
    position: fixed;
    z-index: 999;
    background-color: #fff;
    top: 0px;
}

#commit_btn {
    position: absolute;
    right: 33px;
    color: #2460aa;
    font-weight: 600;
}

#return_icon img {
    width: 20px;
}

#return_icon {
    position: absolute;
    left: 10px;
}
</style>